<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { fetchIndicesDetailDate } from '../api/weatherAPI'
import { useCityStore } from '../stores/cityStore'
import dayjs from 'dayjs'
const cityStore = useCityStore()
const route = useRoute()
const indice = ref(route.params.id)
watch(
  () => cityStore.location,
  () => {
    // city = ref(cityStore.location.name)
    getDate(cityStore.location.id)
  },
  { immediate: true }
)
const indiceDaily = ref([])
const name = ref('')

async function getDate(locationID) {
  const res = await fetchIndicesDetailDate(locationID, indice.value)
  console.log(res)

  // 格式化日期并更新数组
  const formattedDaily = res.daily.map((item) => {
    return {
      ...item,
      date: dayjs(item.date).format('MM月DD日'), // 格式化日期
    }
  })

  indiceDaily.value = formattedDaily
  name.value = res.daily[0]?.name || '' // 添加可选链和默认值
}
</script>
<template>
  <div class="living-index-detail">
    <p class="title">生活指数详情页面</p>
    <p class="thentitle">{{ name }}</p>
    <div v-for="item in indiceDaily" :key="item.date">
      <ul>
        <li class="pd1">
          <p>{{ item.date }}</p>
        </li>
        <li class="pd2">
          <p>{{ item.category }}</p>
          <p>{{ item.text }}</p>
        </li>
      </ul>
      <!-- <p>{{ item.date }}</p>
      <p>{{ item.category }}</p>
      <p>{{ item.text }}</p> -->
    </div>
  </div>
</template>
<style scoped>
.title {
  font-size: 3rem;
}
.thentitle {
  font-size: 2rem;
}
.living-index-detail > div > ul {
  background-color: #86e3ffba;
  border-inline-color: #020034ba;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.living-index-detail > div > ul > li {
  border-color: #020034ba;
  border-style: solid;
  border-width: 0.1rem;
}
.pd2 {
  padding-left: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.5rem;
}
.pd1 {
  display: flex;
  padding-left: 2rem;
  font-size: 2rem;
  align-items: center;
}
</style>
